<template>
  <HelloWorld msg="Welcome to Your Vue.js App" />
  <div id="count">Counter: {{ counter }}</div>

  <div class="demo">
    <ol>
      <BindFirst
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id"
      >
      </BindFirst>
    </ol>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import BindFirst from './components/BindFirst.vue'
export default {
  name: "App",
  components: {
    HelloWorld,
    BindFirst,
  },
  data() {
    return {
      counter: 2,
      message: "Hello Vue.js!",
      groceryList: [
        { id: 0, text: "Vegetables" },
        { id: 1, text: "Cheese" },
        { id: 2, text: "Whatever else humans are supposed to eat" },
      ],
    };
  },
  methods: {
    reverseMsg() {
      this.message = this.message.split("").reverse().join("");
    },
  },
  // mounted() {
  // setInterval(() => {
  //   this.counter++
  // }, 1000)
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
</style>
